<!--弹窗功能-->
<template>
  <div class="mc-dialog-iframe">
    <!--用户反馈太多弹窗不好识别-->
    <span class="mc-dialog-iframe-assist" v-if="title">{{title}}</span>
    <el-dialog ref="iframeDialog" v-bind="$attrs" v-on="$listeners" :title="title" :modal="modalValue" @open="open" @close="close">
      <iframe ref="dialogIframe" :src="hrefVal" frameborder="0" width="100%"  scrolling="yes"></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'mc-dialog-iframe',
    data () {
        return {
          hrefVal:"",
          modalValue:window.iframeUi?false:this.modal,
        }
    },
    //监听下变更 再动态修改url 经常会出现 绑定了输入框的值
    watch:{
    mcv1(val){
        this.buildUrl();
    },
    mcv2(val){
        this.buildUrl();
    },
    mcv3(val){
        this.buildUrl();
    },
     mcv4(val){
        this.buildUrl();
    },
    mcv5(val){
        this.buildUrl();
    },
    mcv6(val){
        this.buildUrl();
    },
    mcv7(val){
        this.buildUrl();
    },
    mcv8(val){
        this.buildUrl();
    },
    mcv9(val){
        this.buildUrl();
    },
    mcv10(val){
        this.buildUrl();
    },
    src(val){
      this.buildUrl();
    }
  },
  props: ['refreshWhileOpen','src','height','mck1','mcv1','mck2','mcv2','mck3','mcv3','mck4','mcv4','mck5','mcv5','mck6','mcv6','mck7','mcv7','mck8','mcv8','mck9','mcv9','mck10','mcv10','title','modal'],

  updated(){
      if(this.height){
        var ref = this.$refs.iframeDialog;
        var children = ref.$el.children || ref.$el.childNodes;
        var elDialog = children[0];
        elDialog.style.height=this.height;

        var elDialogChildren = elDialog.children||elDialog.childNodes;
        var header = elDialogChildren[0];
        if(elDialogChildren.length>1){
          var body = elDialogChildren[1];
          var footerHeight = 0;
          if(elDialogChildren.length>2){
            var footer = elDialogChildren[2];
            var dialogFooter = footer.children[0];
            if(dialogFooter.children.length>0){
              footerHeight = footer.offsetHeight;
            }else {
              if(dialogFooter.offsetHeight>0){
                footerHeight = dialogFooter.offsetHeight;
              }
              if(footerHeight<=30){
                footerHeight = 0;//没操作按钮 干脆也别留白底了
              }
            }
            if(footerHeight>30){
              footerHeight=40;
            }
          }
          body.style.height = "calc( 100% - "+(header.offsetHeight+footerHeight+10)+"px )";
        }
      }
    },
    mounted () {
        this.buildUrl();
    },
    methods:{

      buildUrl(){
        if(this.src){
              this.hrefVal = this.src;
              var params = [];
              if(this.isNotBlank(this.mck1) && this.isNotBlank(this.mcv1)){
                  params.push(this.mck1+"="+this.mcv1);
              }
             if(this.isNotBlank(this.mck2) && this.isNotBlank(this.mcv2)){
                  params.push(this.mck2+"="+this.mcv2);
              }
             if(this.isNotBlank(this.mck3) && this.isNotBlank(this.mcv3)){
                  params.push(this.mck3+"="+this.mcv3);
              }
             if(this.isNotBlank(this.mck4) && this.isNotBlank(this.mcv4)){
                  params.push(this.mck4+"="+this.mcv4);
              }
             if(this.isNotBlank(this.mck5) && this.isNotBlank(this.mcv5)){
                  params.push(this.mck5+"="+this.mcv5);
              }
             if(this.isNotBlank(this.mck6) && this.isNotBlank(this.mcv6)){
                  params.push(this.mck6+"="+this.mcv6);
              }
             if(this.isNotBlank(this.mck7) && this.isNotBlank(this.mcv7)){
                  params.push(this.mck7+"="+this.mcv7);
              }
             if(this.isNotBlank(this.mck8) && this.isNotBlank(this.mcv8)){
                  params.push(this.mck8+"="+this.mcv8);
              }
             if(this.isNotBlank(this.mck9) && this.isNotBlank(this.mcv9)){
                  params.push(this.mck9+"="+this.mcv9);
              }
             if(this.isNotBlank(this.mck10) && this.isNotBlank(this.mcv10)){
                  params.push(this.mck10+"="+this.mcv10);
              }
             if(params.length>0){
                   if(this.hrefVal.indexOf("?")!=-1){
                     this.hrefVal += "&"+params.join("&");
                   }else {
                     this.hrefVal += "?"+params.join("&");
                   }
              }
         }
      },
      isNotBlank(val){
          return typeof val != 'undefined' && val!==null && val !== '' && (val+"").replace(/^\s+|\s+$/g, '') !=="";
      },
      endsWith:function(val,suffix){
        return val.slice(-1*suffix.length) === suffix;
      },
      open(){
        if(this.refreshWhileOpen){
          this.buildUrl();
        }
      },
      close(){
        if(this.refreshWhileOpen){
          this.hrefVal="";
        }
      }
    },

}
</script>

<style lang="scss">
  .mc-dialog-iframe-assist{
    display: none;
  }
  .magicalcoder-dragging .mc-dialog-iframe>.mc-dialog-iframe-assist{
    display: inline-block;
  }
  .mc-dialog-iframe iframe{
      height:100%;
      width:100%;
  }
  .magicalcoder-dragging .mc-dialog-iframe:before{
    content: '网页弹窗';
  }
  .magicalcoder-dragging .mc-dialog-iframe{
      z-index: 10000 !important;
      .el-dialog__headerbtn{
        top:10px;
      }
  }
  .mc-dialog-iframe {
    .el-dialog {
      height: 80%;
      .el-dialog__body {
        box-sizing: border-box;
        height : calc(100% - 120px );
        overflow-y: hidden;
        .mc-ui-absolute-pane{
          position: relative;
          height : 100%;
        }
      }
      /*.el-dialog__footer{
          position: absolute;
          right:0;
          bottom:0;
      }*/

    }
  }
</style>
